<template>
  <div class="map">
    <div class="tou-fa">
      <van-icon @click="bock" name="arrow-left" />
      <span>地图</span>
      <span></span>
    </div>
    <div id="container"></div>
  </div>
</template>
<script>
import styles from "./index.module.css";
import axios from "../../utils/request";
export default {
  data() {
    return {
      map: "",
      labels: "",
      values: "",
      labeler: {
        cursor: "pointer",
        border: "1px solid rgb(255,0,0)",
        padding: "0px",
        whiteSpace: "nowrap",
        fontSize: "12px",
        color: "rgb(255,255,255)",
        textAlign: "center",
      },
    };
  },
  mounted() {
    const BMap = window.BMap;
    // console.log(BMap, "bman");
    (this.labels = window.localStorage.getItem("city")),
      (this.values = window.localStorage.getItem("cityId"));
    this.initMap();
  },
  computed: {},
  methods: {
    bock() {
      this.$router.go(-1);
    },
    initMap() {
      // this.map = new BMap.Map("container")
      // 地图实例
      const labels = this.labels;
      const values = this.values;
      // console.log(labels, values,"123");
      this.map = new BMap.Map("container");
      // console.log(this.map, "map");
      const myGeo = new BMap.Geocoder();
      //获取经纬度
      myGeo.getPoint(
        labels,
        (point) => {
          //   判断是否存在
          if (point) {
            //   设置中心点 第一个参数中心点 经纬度 第二个参数当前地图层级
            this.map.centerAndZoom(point, 11);
            //添加一个平移缩放的控件;
            this.map.addControl(new BMap.NavigationControl());
            //添加一个比例尺的控件;
            this.map.addControl(new BMap.ScaleControl());
            // 添加覆盖物
            this.renderOverlays(values);
          }
        },
        labels
      );
    },
    async renderOverlays(id) {
      // console.log(id,'id');
      const resData = await axios.get("/area/map", {
        params: {
          id,
        },
      });
      // 定义方法拿到类型和缩放层级
      const { type, nextLevel } = this.getTypeAndZoom();
      resData.data.body.forEach((item) => {
        this.createOverlays(type, nextLevel, item);
      });
    },
    getTypeAndZoom() {
      // 获取当前地图层级
      const curZoom = this.map.getZoom();
      // 创建变量存放类型和 缩放层级
      let type, nextLevel;
      // 判断
      if (curZoom >= 10 && curZoom <= 12) {
        type = "circle";
        nextLevel = 13;
      } else if (curZoom >= 12 && curZoom <= 14) {
        (type = "circle"), (nextLevel = 15);
      } else if (curZoom >= 14 && curZoom <= 16) {
        type = "ract";
      }
      return {
        type,
        nextLevel,
      };
    },
    createOverlays(type, nextLevel, item) {
      const {
        coord: { latitude, longitude },
        count,
        label,
        value,
      } = item;
      // 设置里层数据中心点
      var point = new BMap.Point(longitude, latitude);
      // console.log(point);
      // 判断覆盖物类型
      if (type === "ract") {
        // 创建长方形覆盖物
        this.createRact(point, label, count, value);
      } else {
        // 创建圆形覆盖物
        this.createCircle(point, label, count, value, nextLevel);
      }
    },
    createCircle(point, areaName, count, id, level) {
      const opts = {
        // 坐标
        position: point,
        // 偏移量
        offset: new BMap.Size(-35, -35),
      };
      // 创建文本标注对象
      const label = new BMap.Label("", opts);
      label.setContent(`
            <div class='${styles.bubble}'>
                <p class="${styles.name}">${areaName}</p>
                <p>${count}套</p>
            </div>
        `);
      // 设置样式
      label.setStyle(this.labeler);

      // 给覆盖物添加点击事件
      label.addEventListener("click", () => {
        // 调用方法去获取并创建下个层级
        this.renderOverlays(id);
        // 放大地图
        this.map.centerAndZoom(point, level);
        // 清除覆盖物
        setTimeout(() => {
          this.map.clearOverlays();
        }, 0);
      });
      // 把覆盖物添加到地图
      this.map.addOverlay(label);
    },
    createRact(point, areaName, count, id) {
      const opts = {
        // 定位
        position: point,
        // 偏移量
        offset: new BMap.Size(-50, -28),
      };
      // 创建文本标注对象
      const label = new BMap.Label("", opts);
      // console.log(label,'la');
      label.setContent(`
            <div class='${styles.rect}'>
                <span class="${styles.housename}">${areaName}</span>
                <span class="${styles.housenum}">${count}套</span>
            </div>
        `);
      label.setStyle(this.labeler);
      // 添加点击事件
      label.addEventListener("click", () => {
        console.log(1);
      });
      // 把覆盖物添加到地图
      this.map.addOverlay(label);
    },
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: calc(100% - 45px);
}
.tou-fa {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
  background: #f2f2f9;
}
</style>
